<template>
  <div class="form-background">
    <div class="form-box">
    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitForm()">
      <div class="inner-form-box">
        <el-form-item label="您的姓名" prop="customName">
          <el-input v-model="dataForm.customName" :disabled="disabled" placeholder="您的姓名" clearable/>
        </el-form-item>
        <el-form-item label="联系电话" prop="customPhone">
          <el-input v-model="dataForm.customPhone" :disabled="disabled" placeholder="联系电话" clearable/>
        </el-form-item>
        <el-form-item label="科室项目" prop="department">
          <el-dict code="department" v-model="dataForm.department"></el-dict>
        </el-form-item>
        </div>
        <el-form-item>
            <el-button type="primary" @click="dataFormSubmit()" class="button">提交</el-button>
            <el-button @click="resetForm()" class="button">重置</el-button>
        </el-form-item>
    </el-form>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="80%"
      :before-close="handleClose"
      center>
      <span>您已成功预约</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dataForm: {
          customName: '',
          customPhone: '',
          department: '',
          source: '',
          secondarySource: ''
        },
        centerDialogVisible: false,
        dataRule: {
          department: [{required: true, message: '资讯项目不能为空', trigger: 'blur'}],
          customName: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
          customPhone: [{required: true, message: '电话不能为空', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机格式', trigger: ['blur']}],
          other: []
        }
      }
    },
    methods: {
      dataFormSubmit () {
        this.centerDialogVisible = true
      },
      handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      },
      submitForm () {
        this.$refs['dataForm']
          .validate((valid) => {
            if (valid) {
              this.dataForm.source = this.$route.query.source
              this.dataForm.secondarySource = this.$route.query.secondarySource
              this.$http({
                url: `/online/reservation`,
                method: 'post',
                data: this.dataForm
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$refs['dataForm'].resetFields()
                  this.centerDialogVisible = false
                }
              })
            }
          })
      },
      resetForm () {
        this.$refs['dataForm'].resetFields()
      }
    }
  }
</script>
<style scoped>
.form-box {
  width: 80%;
  position: absolute;
  top: 39%;
  left: 10%;
}
.form-background {
  background-image: url(~@/assets/img/background.png);
  background-size: 100% 100%;

  width: 100%;
  height: calc(4812 / 2481 * 100vw);
  position: relative;
  margin: 0 auto;
}

.inner-form-box {
  margin-bottom: 10px;
}
</style>
